<template>
    <div>
        <h2>HOME PAGE</h2>
        <p>name:{{ name }}</p>
        <p>age:{{ age }}</p>
        <button @click="changeName">changeName</button>
        <button @click="changeAge">changeAge</button>
    </div>
</template>

<script>
import { ref, watch, reactive, onMounted } from "vue"

export default {
    name: "Home",
    setup() {
        let name = ref("你好");
        let age = ref(18);
        //监听单个ref数据源
        watch(name,(newValue, oldValue)=>{
            console.log("newValue:",newValue,"oldValue:",oldValue)
        })

        //监听多个ref数据源
        watch([name,age],(newValues, oldValues)=>{
            console.log(newValues,
            oldValues)
        })

        let info = reactive({
            name: "hello",
            age: 18
        })
        //监听reactive单个数据源
        //第一个参数需要传递一个getter函数(必须是一个reg或者reactive响应式对象)
        watch(()=>info.age,(newValue, oldValue)=>{
            console.log("newValue:",newValue,"oldValue:",oldValue)
        })

        function changeName(){
            name.value += "世界"
        }

        function changeAge(){
            info.age++;
        }

        //深度监听
        watch(()=>info,(newValue, oldValue)=>{
            console.log("newValue:",newValue,"oldValue:",oldValue)
        },{deep: true})

        return {
            name,
            age,
            info,
            changeName,
            changeAge
        }
    },
}
</script>

<style scoped>

</style>